<template>
    <el-config-provider :locale="locales[$store.state.settings.defaultLang]">
        <RouterView />
        <!-- <audio id="alarm_audio" ref="alarmAudio" :src="alarmAudioSrc" loop></audio> -->
    </el-config-provider>
</template>

<script>
import { getElementLocales } from '@/locales'
import alarmSrc from '@/assets/images/alarm.wav'

export default {
    provide() {
        return {
            generateI18nTitle: this.generateI18nTitle
        }
    },
    data() {
        return {
            alarmAudioSrc: ''
        }
    },
    computed: {
        locales: () => getElementLocales()
    },
    watch: {
        '$store.state.settings.mode': {
            handler() {
                if (this.$store.state.settings.mode === 'pc') {
                    this.$store.commit('settings/updateThemeSetting', {
                        sidebarCollapse: this.$store.state.settings.sidebarCollapseLastStatus
                    })
                } else if (this.$store.state.settings.mode === 'mobile') {
                    this.$store.commit('settings/updateThemeSetting', {
                        sidebarCollapse: true
                    })
                }
                document.body.setAttribute('data-mode', this.$store.state.settings.mode)
            },
            immediate: true
        },
        '$store.state.settings.theme': {
            handler() {
                document.body.setAttribute('data-theme', this.$store.state.settings.theme)
            },
            immediate: true
        },
        '$store.state.settings.menuMode': {
            handler() {
                this.setMenuMode()
            },
            immediate: true
        },
        '$store.state.settings.sidebarCollapse': {
            handler() {
                this.setMenuMode()
            },
            immediate: true
        },
        '$store.state.settings.appWidthMode': {
            handler() {
                document.body.setAttribute('data-app-width-mode', this.$store.state.settings.appWidthMode)
            },
            immediate: true
        },
        '$store.state.settings.enableDynamicTitle': {
            handler() {
                this.setDocumentTitle()
            },
            immediate: true
        },
        '$store.state.settings.title': {
            handler() {
                this.setDocumentTitle()
            },
            immediate: true
        }
    },
    created() {
        let username = this.getUrlKey('user')
        let password = this.getUrlKey('pwd')
        if (username && password) {
            this.$store
                .dispatch('user/auth', { appid: 'scpzhxf', appkey: '123456' })
                .then((res) => {
                    this.$store
                        .dispatch('user/login', { username, password })
                        .then(() => {
                            this.loading = false
                            this.$router.push({ path: this.redirect || '/' })
                        })
                        .catch(() => {
                            this.loading = false
                        })
                })
                .catch(() => {
                    this.loading = false
                })
        }
    },
    mounted() {
        this.alarmAudioSrc = alarmSrc
        window.onresize = () => {
            this.$store.commit('settings/setMode', document.documentElement.clientWidth)
        }
        window.onresize()
    },
    methods: {
        getUrlKey(name) {
            return (
                decodeURIComponent(
                    (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(
                        /\+/g,
                        '%20'
                    )
                ) || null
            )
        },
        generateI18nTitle(key, defaultTitle) {
            return !!key && this.$te(key) ? this.$t(key) : defaultTitle
        },
        setDocumentTitle() {
            if (this.$store.state.settings.enableDynamicTitle && this.$store.state.settings.title) {
                let title = this.generateI18nTitle(this.$route.meta.i18n, this.$store.state.settings.title)
                document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
            } else {
                document.title = import.meta.env.VITE_APP_TITLE
            }
        },
        setMenuMode() {
            document.body.removeAttribute('data-sidebar-no-collapse')
            document.body.removeAttribute('data-sidebar-collapse')
            if (['side', 'head', 'single'].includes(this.$store.state.settings.menuMode)) {
                if (this.$store.state.settings.sidebarCollapse) {
                    document.body.setAttribute('data-sidebar-collapse', '')
                } else {
                    document.body.setAttribute('data-sidebar-no-collapse', '')
                }
            }
            document.body.setAttribute('data-menu-mode', this.$store.state.settings.menuMode)
        }
    }
}
</script>
<style>
.app-container {
    padding: 20px;
    box-sizing: border-box;
}

.w-200 {
    width: 200px !important;
}

.w-280 {
    width: 280px !important;
}
</style>
